<template>
  <v-app id="main">
       <div
        style="display:flex;align-items:center;justify-content:center;height: 100%;"
        >
          <v-card
            style="width:60%;height:80%;display:flex;z-index:999"
          >
          <div style="flex:1;height:100%;">
            <img style="width:100%;min-height:100%;max-height:100%;border-radius:5px" src="https://picsum.photos/id/254/510/700?random" alt="">
          </div>
          <div style="flex:1">
            <v-row justify="center" align-content="center" style="height:100%" >
              <div style="min-width:300px">
                <v-row style="margin-bottom:50px;" justify="center">
                  <v-avatar style="margin-right:10px;" color="orange" size="100">
                  <img src="@/assets/喜多酱.png" alt="">
                </v-avatar>
                </v-row>
                <v-row justify="center">
                  <span class="text-subtitle-1" style="font-size:2rem !important;font-weight:bold;">Hello Again!</span>
                </v-row>
                <v-form
                    ref="form"
                    style="margin-top:20px;"
                    lazy-validation
                  >
                    <v-text-field
                      :counter="20"
                      label="账号"
                      v-model="loginForm.username"
                      :rules="rules.nameRule"
                      required
                    ></v-text-field>

                    <v-text-field
                      label="密码"
                      :type="showPassword ? 'password' : 'text'"
                      :append-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
                      v-model="loginForm.password"
                      @click:append="showPassword = !showPassword"
                      :rules="rules.passwordRule"
                      required
                    ></v-text-field>
                    <v-row
                    justify="center"
                    style="margin-top:10px;"
                    > 
                      <v-btn
                      color="indigo"
                      @click="clickLogin"
                      >
                      登录
                    </v-btn>
                    </v-row>
                      
                  </v-form>
                  <div style="display:flex;justify-content:center;min-width:300px;position:absolute;bottom:20px;align-items:center" >
                    <span class="text-caption" style="color:grey;margin-top:1px;">Don't hava An account yet?</span>
                    <a style="color:#3F51B5;margin-left:5px;">Sign Up</a>
                  </div>
              </div>
            </v-row>
          </div>
          </v-card>
          
      </div>
      <vue-particles
        color="#3F51B5"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="star"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
  </v-app>
</template>

<script>
import {mapActions} from 'vuex'
export default {
    name: 'Login',
    data(){
      return{
        showPassword: true,
        loginForm:{
          username:'',
          password:''
        },
        rules:{
          nameRule: [
            v => !!v || 'Name is required',
            v => ( v && v.length <= 10) || 'Must be less than 20 characters'
          ],
          passwordRule:[
            v => !!v || 'Password is required'
          ]
        }
      }
    },
    methods:{
      ...mapActions([
        'handleLogin',
      ]),

      clickLogin(){
        console.log('点击了登录');
        let username = this.loginForm.username
        let password = this.loginForm.password
        this.$refs.form.validate()
        this.handleLogin({username,password}).then(res => {
            this.$router.push({path: '/'})
        })
        
      }
    },
    mounted(){
      
    }
}
</script>

<style lang="scss">
 #particles-js {
    width: 100%;
    height: calc(100% - 100px);
     position: absolute;  
  }

html{
  overflow: auto;
}


  
</style>

